import React from 'react';
import Paper from 'material-ui/lib/paper';
import DateRangePicker from './DateRangePicker';

const paperStyle = {
	padding: 15,
	marginTop: 15,
	marginBottom: 15
}

const dateRangePickerStyle = {
	marginTop: 10,
	marginBottom: 10
}

export default class ChartGroup extends React.Component {

	static propTypes = {
	 	onDateRangeChange: React.PropTypes.func,
	};

	static defaultProps = {
		onDateRangeChange: function() { },
	};

	constructor(props) {
		super(props);
	}

	render() {
		let { children, onDateRangeChange, startDate, endDate } = this.props;

		return (
			<Paper zDepth={1} style={paperStyle}>
				<div style={dateRangePickerStyle}>
					<DateRangePicker 
						onDateRangeChange={onDateRangeChange} 
						startDate={startDate} 
						endDate={endDate} />
				</div>
				{children}
			</Paper>
		);
	}
}